<template>
  <boder-box-1>
    <dv-card>
      <template #header>
        <dv-title1
          :background-image-url="
            require('@/assets/threeGovernment/titleBj.png')
          "
          >三项机制比学赶超</dv-title1
        >
      </template>
      <div class="content">
        <dv-card :cardBg="require('@/assets/threeMechanism/1bg.png')" sub>
          <template #header>
            <dv-title-2
              >完善专班运作机制集中优势力量“一对一”啃硬骨头</dv-title-2
            >
          </template>
          <Pie eleId="pie2" :source="pie2" width="430" height="110"></Pie>
          <Image
            :src="require('@/assets/components/654333/a9.png')"
            width="420"
          ></Image>
        </dv-card>

        <dv-card :cardBg="require('@/assets/threeMechanism/2bg.png')" sub>
          <template #header>
            <dv-title-2>完善周督查月通报季晒拼确保工作推进提速提效</dv-title-2>
          </template>
          <Image
            :src="require('@/assets/components/654333/a6.png')"
            width="420"
          ></Image>
        </dv-card>

        <dv-card :cardBg="require('@/assets/threeMechanism/3bg.png')" sub>
          <template #header>
            <dv-title-2>完善有效激励机制，坚持奖优罚劣</dv-title-2>
          </template>
          <div style="margin-left: 15px">
            <Image
              :src="require('@/assets/components/654333/a7.png')"
              width="410"
            ></Image>
          </div>
        </dv-card>
      </div>
    </dv-card>
  </boder-box-1>
</template>

<script>
import BoderBox1 from "@/components/BorderBox1/index.vue";
import DvTitle1 from "@/components/DvTitle1.vue";
import DvCard from "@/components/DvCard/index.vue";
import DvTitle2 from "@/components/DvTitle2.vue";
import Pie from "@/components/charts/Pie";
import Image from "@/components/Image";
export default {
  name: "ThreeMechanism",
  components: {
    BoderBox1,
    DvTitle1,
    DvCard,
    DvTitle2,
    Pie,
    Image,
  },
  data() {
    return {
      pie2: [
        { value: 24, name: "搭建专班1" },
        { value: 32, name: "搭建专班2" },
        { value: 29, name: "搭建专班3" },
        { value: 48, name: "搭建专班4" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: grid;
  grid-template-rows: 254px 365px 255px;
}
</style>
